<template>
	<view class="content" @click="linkToDetail">
		<view class="main">
			<view class="data">
				<view class="header">
					<view class="icon">
						<i :class="['iconfont', expression]">
						</i>
					</view>
					<view class="projectName">
						{{ props.projectData.projectName || '--' }}
					</view>
					<view class="projectStatus">
						<dict-tag :options="props.visit_cooperation_List"
							:dictValue="props.projectData.cooperationStatus"></dict-tag>
					</view>
				</view>
				<view class="body">
					<view class="item">
						{{ props.projectData?.enterprise?.province || '--' }}&nbsp;|&nbsp;{{ props.projectData?.enterprise?.enterpriseName || '--' }}
					</view>
					<view class="item">{{ props.projectData?.contactName || '--' }}&nbsp;|&nbsp;{{ props.projectData?.contactTitle }}&nbsp;|&nbsp;{{ props.projectData?.contactInformation || '--' }}
					</view>
				</view>
			</view>
			<view class="subData">
				<view class="name">
					{{ props.projectData.chargeName || '--' }}&nbsp;|&nbsp;<dict-tag labelFiled="deptName"
						valueFiled="deptId" :options="props.deptList"
						:dictValue="props.projectData.deptId"></dict-tag>
				</view>
				<view class="time">
					最近更新: {{props.projectData.updateByName}}&nbsp;{{ createTimeComputed }}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { withDefaults, defineProps, computed } from "vue"
	import dictTag from "@/components/dictTag/index.vue";
	import type { ProjectData } from "@/pages/projectList/types"
	import type { ProjectItem } from "./types"
	const props = withDefaults(defineProps<ProjectItem>(), {
		projectData: () : ProjectData => ({
			projectId: "",
			createTime: "",
			projectName: "",
			deptId: "",
			chargeName: "",
			intentionLevel: "",
			cooperationStatus: "",
			enterprise: {
				enterpriseName: "",
				contactName: "",
				contactTitle: "",
				contactInformation: "",
				province: "",
			}
		}),
		contactTitleList: () => [],
		deptList: () => [],
		visit_cooperation_List: () => []
	})

	//表情
	let expression = computed(() : string => {
		let { intentionLevel } = props.projectData
		if (intentionLevel == '3') {
			//一般
			return 'icon-dai'
		} else if (intentionLevel == '2') {
			//较好
			return 'icon-xiaolian'
		} else if (intentionLevel == '1') {
			//很好
			return 'icon-xiaolianwawa'
		} else if (intentionLevel == '4') {
			//较差
			return 'icon-kulian1'
		} else if (intentionLevel == '5') {
			//很差
			return 'icon-kulian'
		} else {
			return ''
		}
	})

	//更新时间
	let createTimeComputed = computed(() => {
		let { createTime } = props.projectData
		if (createTime) {
			let target = createTime.split(" ")
			return target[0]
		} else {
			return "--"
		}
	})


	//跳转至详情
	let linkToDetail = () : void => {
		let { projectId } = props.projectData
		uni.navigateTo({
			url: `/pages/projectItemDetail/projectItemDetail?projectId=${projectId}`,
			events:{
				  reload:function(data){
					console.log('fromBackPageData',data);
				  }
			},
			success(res) {
				res.eventChannel.emit('linkToDetail', '')
			}
		})
	}
</script>

<style lang="scss" scoped>
	$padding-x: 10rpx;
	$iconWidth: 70rpx;
	$iconPadding-r: 15rpx;

	.content {
		margin-bottom: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.main {
			border-radius: 20rpx;
			overflow: hidden;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);

			.data {
				background: #fff;
				padding: 20rpx calc($padding-x + 10rpx) 20rpx $padding-x;
				box-sizing: border-box;

				.header {
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 20rpx;
					padding-bottom: 20rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #eeeeee;

					.icon {
						flex: 0 0 auto;
						white-space: nowrap;
						width: $iconWidth;
						text-align: center;
						padding-right: $iconPadding-r;
						box-sizing: border-box;

						.iconfont {
							font-size: 45rpx;
						}

						.icon-dai {
							color: #feb122;
						}

						.icon-xiaolian {
							color: #cdf207;
						}

						.icon-xiaolianwawa {
							color: #04deb0;
						}

						.icon-kulian {
							color: #fc863b;
						}

						.icon-kulian1 {
							color: #ff4c4c;
						}
					}

					.projectName {
						flex: 1 1 auto;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						min-width: 0;
						font-weight: bold;
					}

					.projectStatus {
						flex: 0 0 auto;
						white-space: nowrap;
						font-weight: bold;
						color: #403fa1;

					}
				}

				.body {
					padding-left: $iconWidth;
					box-sizing: border-box;
					color: #666666;
					font-size: 28rpx;
					font-weight: 600;

					.item {
						height: 70rpx;
						line-height: 70rpx;
					}
				}
			}

			.subData {
				background: #fff;
				border-radius: 10rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 20rpx 20rpx calc($padding-x + $iconWidth);
				box-sizing: border-box;
				background-color: #f9f9fb;
				font-weight: 600;

				.name {
					flex: 1;
					color: #666666;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.time {
					color: #b3b3b4;
					font-size: 24rpx;
					width: fit-content;
					white-space: nowrap;
				}
			}
		}
	}
</style>